<html>
<head>
<title>RChart, User Guide</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>

<body bgcolor="#FFFFFF" leftmargin="35">
<h3>RCHART, User Guide</h3>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><i>Copyright 2005, J4L 
  Components (http://www.java4less.com)</i></font> <br>
  <a href="tutorialcontents.html">Go bak to contents</a></p>
<hr>
<h3><font face="Arial, Helvetica, sans-serif">Axis configuration / parameters 
  </font></h3>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><a href="#0">The label</a></font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><a href="#1">The ticks</a></font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><a href="#2">The scale's 
    labels</a></font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><a href="#3">The grid</a></font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><a href="#4">Cero position 
    axis</a></font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><a href="#5">Closed 
    axis</a></font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><a href="#6">Dates</a></font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><a href="#7">Second 
    Y axis</a><br>
    </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><a href="#8">Look of 
    the axis</a><br>
    </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><a href="#9">X axis 
    on top</a></font></li>
  <li><a href="#10"><font face="Arial, Helvetica, sans-serif" size="-1">Additional 
    (secondary) axis</font></a></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"><a href="#11">Axis target 
    zones</a></font></li>
  <li><a href="#12"><font face="Arial, Helvetica, sans-serif" size="-1">Axis label 
    templates</font></a></li>
</ul>
<p>&nbsp; </p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">RChart supports 3 axis, 
  a horizontal axis (X) at the bottom of the chart, and 2 vertical axis to the 
  left (Y) and to the right (Y2) of the chart.</font></p>
<h4><font face="Arial, Helvetica, sans-serif" size="-1"><a name="0"></a>The label</font></h4>
<p><font face="Arial, Helvetica, sans-serif" size="-1">Each Axis can have an associate 
  label. The label of the following example is &quot;Million $&quot;:</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axislabel.PNG" width="82" height="227"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The properties of the label 
  are:</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">Text: text of the label.</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">Font: font used to paint 
    the label.</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">Color: color of the 
    label.</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">Vertical: if true, the 
    text will be painted vertically (rotated).</font></li>
</ul>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The following example paints 
  a blue vertical label with &quot;Serif&quot; font: </font></p>
<table width="100%" border="0" height="107">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="90"> 
      <p>YLABEL=Million $<br>
        YLABEL_FONT=Serif|BOLD|14 <br>
        YLABEL_COLOR=0x0000ff <br>
        YLABEL_VERTICAL=true</p>
    </td>
    <td width="26%" valign="top" height="90"> 
      <p><i><font color="#3333FF">Text of label</font></i><br>
        <i><font color="#3333FF">Font of the label<br>
        Color<br>
        Rotate text (draw vertically)</font></i><br>
        <br>
      </p>
    </td>
    <td width="44%" valign="top" height="90"> 
      <div align="left"> 
        <p>chart.YLabel=new VAxisLabel(&quot;Million&quot;,color,font);<br>
          see <i>font</i> in label constructor<br>
          see <i>color</i> in label constructor <br>
          chart.Ylabel.vertical=true; <br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisVerticallabel.PNG" width="65" height="225"></font></p>
<p>&nbsp;</p>
<h4><font face="Arial, Helvetica, sans-serif" size="-1"><a name="1"></a>The ticks</font></h4>
<p><font face="Arial, Helvetica, sans-serif" size="-1">RChart supports 2 kind 
  of ticks:</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">small ticks: these are 
    ticks between big ticks, they do not have any label. </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">big ticks: these ticks 
    are always displayed with a label.</font></li>
</ul>
<p><font face="Arial, Helvetica, sans-serif" size="-1">There are 2 ways you can 
  control the number and position of the ticks in the scale:</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><b>Manual</b>: You can 
  use the following parameters to define the spacing between ticks: </font></p>
<ul>
  <ul>
    <li><font face="Arial, Helvetica, sans-serif" size="-1">TICK_INTERVALY: distance 
      between small ticks (<b>in axis units</b>).</font></li>
    <li><font face="Arial, Helvetica, sans-serif" size="-1">BIG_TICK_INTERVALY: 
      Number of small tick between big ticks. Note that these <b>are not axis 
      units, </b>these are number of small ticks.</font></li>
  </ul>
  <p>&nbsp;</p>
</ul>
<p><font face="Arial, Helvetica, sans-serif" size="-1">the default values are: 
  </font></p>
<table width="100%" border="0" height="107">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="60"> 
      <p>TICK_INTERVALY=1<br>
        BIG_TICK_INTERVALY=5 </p>
    </td>
    <td width="26%" valign="top" height="60"> 
      <p><i><font color="#3333FF">Small ticks for each unit of the scale</font></i><br>
        <i><font color="#3333FF">Big ticks (and label) after 5 small ticks</font></i>.<br>
      </p>
    </td>
    <td width="44%" valign="top" height="60"> 
      <div align="left"> 
        <p>yAxis.scaleTickInterval=1;<br>
          yAxis.bigTickInterval=5;<br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><br>
  </font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisTicks.PNG" width="48" height="92"></font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">an example is:</font></p>
<table width="100%" border="0" height="107">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="60"> 
      <p>TICK_INTERVALY=2<br>
        BIG_TICK_INTERVALY=10</p>
    </td>
    <td width="26%" valign="top" height="60"> 
      <p><font color="#3333FF"><i>the result will be one big tick after 20 unit 
        (2*10)</i></font><br>
      </p>
    </td>
    <td width="44%" valign="top" height="60"> 
      <div align="left"> 
        <p>yAxis.scaleTickInterval=2;<br>
          yAxis.bigTickInterval=10;<br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisTicks2.PNG" width="48" height="161"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><b>Automatic</b>: you can 
  also let RChart calculate the value for the tick interval using the following 
  parameters:</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">YAXIS_AUTO_TICKS: if 
    not 0 , Rchart will calculate the tick interval for the Y axis. This parameter 
    is used to define the number of desired ticks.<br>
    </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">YAXIS_PREF_TICK_INTERVAL: 
    Only used if AXIS_AUTO_TICKS is true. RChart will use the interval in this 
    list which is more appropiate to get the desired amount of ticks. The default 
    is:</font></li>
</ul>
<p><font face="Arial, Helvetica, sans-serif" size="-1">VALUE=&quot;0.1|0.5|1|5|10|25|50|100|250|500|1000|5000|10000|50000|100000|500000|1000000&quot; 
  </font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">For example, if your values 
  range from 0 till 300 and the desired number of ticks is 10. RChart will select 
  tick_interval=25 which will result in 12 ticks. See screenshot.</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisAutoTicks.PNG" width="281" height="255"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">Other ticks parameters</font></p>
<table width="100%" border="0" height="107">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="60"> 
      <p>YAXIS_START_WITH_BIG_TICK=false<br>
        YAXIS_TICKATBASE=<b>false</b></p>
    </td>
    <td width="26%" valign="top" height="60"> 
      <p><font color="#3333FF">First tick should be small<br>
        Ticks should not start at 0</font> </p>
    </td>
    <td width="44%" valign="top" height="60"> 
      <div align="left"> 
        <p>chart.YAxis.startWithBigTick=false;<br>
          chart.YAxis.tickAtBase=false; <br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisNoTickAtbase.PNG" width="51" height="188"></font></p>
<table width="100%" border="0" height="107">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="60"> 
      <p>YAXIS_START_WITH_BIG_TICK=false<br>
        YAXIS_TICKATBASE=<b>true</b></p>
    </td>
    <td width="26%" valign="top" height="60"> 
      <p><font color="#3333FF">First tick should be small<br>
        Ticks should tart at 0</font> </p>
    </td>
    <td width="44%" valign="top" height="60"> 
      <div align="left"> 
        <p>chart.YAxis.startWithBigTick=false;<br>
          chart.YAxis.tickAtBase=true; <br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisTickAtbase.PNG" width="60" height="202"></font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">If you don't want to have 
  small ticks you can set BIG_TICK_INTERVALY=1. For example:</font></p>
<table width="100%" border="0" height="107">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="60"> 
      <p>TICK_INTERVALY=5<br>
        BIG_TICK_INTERVALY=1</p>
    </td>
    <td width="26%" valign="top" height="60"> 
      <p><font color="#3333FF">One tick every 5 units<br>
        One big tick (with label) every 1 small ticks (ie. there will be only 
        big ticks)</font> </p>
    </td>
    <td width="44%" valign="top" height="60"> 
      <div align="left"> 
        <p>chart.YAxis.scaleTickInterval=5;<br>
          chart.YAxis.bigTickInterval=1;<br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisNoSmallTicks.PNG" width="43" height="118"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><b>Ticks at irregular interval</b></font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The tick interval parameters 
  allows you to define the position of the ticks. These are displayed at fixed 
  intervals only. You can also use the BIG_TICK_INTERVAL_LISTY parameter to define 
  the positions where the big ticks should appear. For example:</font></p>
<table width="100%" border="0" height="107">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="60"> 
      <p>TICK_INTERVALY=5 <br>
        BIG_TICK_INTERVALY=1<br>
        <br>
        BIG_TICK_INTERVAL_LISTY=1|3|7 </p>
    </td>
    <td width="26%" valign="top" height="60"> 
      <p><font color="#3333FF">One tick every 5 units<br>
        One big tick (with label) every 1 small ticks (ie. there will be only 
        big ticks)</font> <br>
        <font color="#3333FF">The following big ticks will be missing: 2,4,5,6</font></p>
    </td>
    <td width="44%" valign="top" height="60"> 
      <div align="left"> 
        <p>chart.YAxis.scaleTickInterval=5;<br>
          chart.YAxis.bigTickInterval=1;<br>
          <br>
          chart.YAxis.bigTickIntervalList ={1,3,7};<br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisIrregularTicks.PNG" width="65" height="198"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The following parameters 
  allow you to control the length of the ticks. For example, you can remove the 
  small ticks by making its length=0:</font></p>
<table width="100%" border="0" height="107">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="60"> 
      <p>YAXIS_TICKPIXELS=0<br>
        YAXIS_BIGTICKPIXELS=6<br>
        BIG_TICK_INTERVAL_LISTY=1|3|7<br>
        YAXIS_START_WITH_BIG_TICK=false </p>
    </td>
    <td width="26%" valign="top" height="60"> 
      <p><font color="#3333FF">Length of small ticks (0, invisible)<br>
        Length of big tick</font></p>
    </td>
    <td width="44%" valign="top" height="60"> 
      <div align="left"> 
        <p>chart.YAxis.tickPixels=0;<br>
          chart.YAxis.bigTickPixels=6;<br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisTicksLength.PNG" width="37" height="178"></font></p>
<p>&nbsp;</p>
<h4><font face="Arial, Helvetica, sans-serif" size="-1"><a name="2"></a>The scale 
  labels</font></h4>
<p><font face="Arial, Helvetica, sans-serif" size="-1">Labels are always displayed 
  at the big ticks positions. The following parameters allow you to modify the 
  labels.</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">XAXIS_LABEL_FORMAT. If 
  XAXIS_INTEGER is false, this format will be used to draw the label. For example 
  &quot;#####.00&quot; will always display 2 decimal digits. The format uses the 
  following symbols: </font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"> 0 a digit, </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"> # a digit, zero shows 
    as absent </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">. placeholder for decimal 
    separator </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">, placeholder for grouping 
    separator. </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">- default negative prefix. 
    </font></li>
</ul>
<table width="100%" border="0" height="81">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="60"> 
      <p>YAXIS_LABEL_FORMAT=#0.0 </p>
    </td>
    <td width="26%" valign="top" height="60"> 
      <p><font color="#3333FF">Use only 1 decimal digit in the tick labels</font></p>
    </td>
    <td width="44%" valign="top" height="60"> 
      <div align="left"> 
        <p>chart.YAxis.scaleLabelFormat;<br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisLabelFormat.PNG" width="41" height="199"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The following parameter 
  will remove the digits right of the decimal separator:</font></p>
<table width="100%" border="0" height="81">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="60"> 
      <p>YAXIS_INTEGER=true</p>
    </td>
    <td width="26%" valign="top" height="60"> 
      <p><font color="#3333FF">Do not use decimal values in labels of the ticks.</font></p>
    </td>
    <td width="44%" valign="top" height="60"> 
      <div align="left"> 
        <p>chart.YAxis.IntegerScale=true<br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p>&nbsp;</p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">You can specify your 
    own text for the labels using:</font></li>
</ul>
<p>&nbsp;</p>
<table width="100%" border="0" height="81">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="60"> 
      <p>YAXIS_LABELS=cero|one|two|three|four|five </p>
    </td>
    <td width="26%" valign="top" height="60"> 
      <p><font color="#3333FF">User defined labels for the big ticks.</font></p>
    </td>
    <td width="44%" valign="top" height="60"> 
      <div align="left"> 
        <p>chart.YAxis.tickLabels={&quot;cero&quot;,&quot;one&quot;,....};<br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisLabelList.PNG" width="47" height="200"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">You can split your labels 
  in sereval lines by using &quot;\n&quot;.</font></p>
<table width="100%" border="0" height="81">
  <tr> 
    <td width="39%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="33%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="28%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="39%" valign="top" height="86"> 
      <p>XAXIS_VERTICAL_LABELS=false. </p>
      <p>XAXIS_LABELS=June\n2002|July\n2002|Aug.\n2002|<br>
        Sept.\n2002|Oct.\n2002|Nov.\n2002|Dec.\n2002 </p>
      <p>&nbsp; </p>
    </td>
    <td width="33%" valign="top" height="86"> 
      <p><font color="#3333FF">If &quot;true&quot; the labels will be painted 
        with a 90 degrees rotation. <br>
        <br>
        User defined labels (2 lines)</font></p>
    </td>
    <td width="28%" valign="top" height="86"> 
      <div align="left"> 
        <p>chart.XAxis.rotateLabels;<br>
          <br>
          chart.XAxis.tickLabels;<br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisLabel2Lines.PNG" width="256" height="61"> 
  </font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">or paint labels vertically 
  (or with any rotation angle):</font></p>
<table width="100%" border="0" height="59">
  <tr> 
    <td width="41%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="28%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="31%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="41%" valign="top" height="60"> 
      <p>XAXIS_VERTICAL_LABELS=TRUE <br>
        or<br>
        XAXIS_ROTATE_LABELS=90</p>
      </td>
    <td width="28%" valign="top" height="60"> 
      <p><font color="#3333FF">Rotate labels</font></p>
    </td>
    <td width="31%" valign="top" height="60"> 
      <div align="left"> 
        <p> chart.XAxis.rotateLabels; </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisLabelvertical.PNG" width="236" height="75"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><b><a name="3"></a>The 
  grid</b></font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">RChart will by default 
  no display a grid:</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisNoGrid.PNG" width="261" height="231"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">however you can add the 
  grid with the following parameters:</font></p>
<table width="100%" border="0" height="98">
  <tr> 
    <td width="41%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="37%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="22%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="41%" valign="top" height="66"> 
      <p>XAXIS_GRID=0.2|0xffffff|DASHED <br>
        YAXIS_GRID=0.2|0xffffff|DASHED <br>
        GRIDY=TRUE </p>
      <p>&nbsp; </p>
    </td>
    <td width="37%" valign="top" height="66"> 
      <p><font color="#3333FF">Line style of the grid<br>
        <br>
        Grid at big ticks only</font></p>
    </td>
    <td width="22%" valign="top" height="66"> 
      <div align="left"> 
        <p>chart.XAxis.gridStyle;<br>
          <br>
          chart.XAxis.bigTicksGrid ; </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1">which let you define the 
  style of the line used for the grid lines.</font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisGrid.PNG" width="268" height="238"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">If you want to get a finer 
  grid you can display the grid at the small tick positions with:</font></p>
<table width="100%" border="0" height="81">
  <tr> 
    <td width="41%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="37%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="22%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="41%" valign="top" height="60"> 
      <p>XAXIS_GRID=0.2|0xffffff|DASHED <br>
        YAXIS_GRID=0.2|0xffffff|DASHED <br>
        GRIDY=false</p>
      <p>&nbsp; </p>
    </td>
    <td width="37%" valign="top" height="60"> 
      <p><font color="#3333FF">Line style of the grid<br>
        <br>
        Grid at small ticks</font></p>
    </td>
    <td width="22%" valign="top" height="60"> 
      <div align="left"> 
        <p>chart.XAxis.gridStyle;<br>
          <br>
          chart.XAxis.bigTicksGrid ; <br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisFinegrid.PNG" width="263" height="208"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">You can of course display 
  lines for 1 axis only, for example:</font></p>
<table width="100%" border="0" height="81">
  <tr> 
    <td width="41%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="37%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="22%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="41%" valign="top" height="60"> 
      <p>XAXIS_GRID=0.2|0xffffff|DASHED </p>
      <p>&nbsp; </p>
    </td>
    <td width="37%" valign="top" height="60"> 
      <p><font color="#3333FF">Only vertical grid</font></p>
    </td>
    <td width="22%" valign="top" height="60"> 
      <div align="left"> 
        <p>chart.XAxis.gridStyle;<br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisVerticalGrid.PNG" width="259" height="225"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">You can also set an alternate 
  filling for the grid. In the example you see the background alternates white 
  and grey.</font></p>
<p><img src="images/gridfilling.PNG" width="155" height="125"></p>
<table width="100%" border="0" height="74">
  <tr> 
    <td width="37%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="25%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="38%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="37%" valign="top" height="60"> 
      <p>YAXIS_FILL_GRID=0xE0E0E0;<br>
        LINECHART_BACK=WHITE; <br>
      </p>
    </td>
    <td width="25%" valign="top" height="60"> 
      <p><font color="#3333FF">Grid filling (grey)<br>
        </font><font color="#3333FF">Plotter background</font></p>
      </td>
    <td width="38%" valign="top" height="60"> 
      <div align="left"> 
        <p>axis.gridFillStyle= new FillStyle GraphicsProvider.getColor( &quot;0xE0E0E0&quot;) 
          );<br>
          linePlotter.back=new FillStyle GraphicsProvider.getColor( ChartColor.WHITE));</p>
      </div>
    </td>
  </tr>
</table>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><b><a name="4"></a>Cero 
  position axis</b></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">If your scale's minimum 
  value is less than cero, you might want to paint a line at the cero possition 
  to be used as reference by the user.</font></p>
<table width="100%" border="0" height="74">
  <tr> 
    <td width="37%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="31%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="32%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="37%" valign="top" height="60"> 
      <p>CERO_XAXIS=LINE<br>
        CERO_XAXIS_STYLE=0.2|0x00NORMAL </p>
    </td>
    <td width="31%" valign="top" height="60"> 
      <p><font color="#3333FF">Draw line at Y axis, position 0<br>
        Style of line</font></p>
    </td>
    <td width="32%" valign="top" height="60"> 
      <div align="left"> 
        <p>chart.XAxis.ceroAxis=Axis.CEROAXIS_LINE;<br>
          chart.XAxis.ceroAxisStyle </p>
      </div>
    </td>
  </tr>
</table>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisCeroAxis2.PNG" width="264" height="227"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">You can also define the 
  cero axis to include the ticks (the labels are still painted at the bottom of 
  the chart).</font></p>
<table width="100%" border="0" height="81">
  <tr> 
    <td width="41%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="37%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="22%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="41%" valign="top" height="36"> 
      <p>CERO_XAXIS=SCALE </p>
    </td>
    <td width="37%" valign="top" height="36"> 
      <p><font color="#3333FF">Draw scale at Y axis position 0</font></p>
    </td>
    <td width="22%" valign="top" height="36"> 
      <div align="left"> 
        <p>chart.XAxis.ceroAxis=Axis.CEROAXIS_SCALE </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisCeroAxis1.PNG" width="273" height="258"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><b><a name="5"></a>Closed 
  axis</b></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The following parameters 
  allows you create a &quot;frame&quot; around the chart. </font></p>
<table width="100%" border="0" height="81">
  <tr> 
    <td width="41%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="37%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="22%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="41%" valign="top" height="36"> 
      <p>XAXIS_CLOSED=TRUE <br>
        YAXIS_CLOSED=TRUE </p>
    </td>
    <td width="37%" valign="top" height="36"> 
      <p><font color="#3333FF">draw lines at the top and on right of the chart 
        to get a closed box.</font></p>
    </td>
    <td width="22%" valign="top" height="36"> 
      <div align="left"> 
        <p>chart.XAxis.axisFrame=true; <br>
          chart.YAxis.axisFrame=true; </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisClosed.PNG" width="284" height="251"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><b><a name="6"></a>Dates</b></font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">You can use dates as labels 
  for the ticks with the following parameters:</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">XAXIS_DATE_FORMAT (default 
    is dd-MMM-yyyy): format of the label. Use &quot;MMM&quot; to display only 
    the month's name. </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">XAXIS_DATE_STEP: scale 
    unit. The default is &quot;d&quot; which means 1 unit is 1 day. Other values 
    are &quot;m&quot; (months), &quot;w&quot; (week) , &quot;y&quot; (year), &quot;h&quot; 
    (hours) and &quot;n&quot; (minutes). You can also use &quot;d3&quot; ( 3 days), 
    &quot;m2&quot; (2 months) .... </font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">XAXIS_INITIAL_DATE: 
    this date will be used as base (first tick) if you want to calculate dates 
    for the tick labels. Incompatible with logarithmic scales. <br>
    </font></li>
</ul>
<table width="100%" border="0" height="81">
  <tr> 
    <td width="32%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="39%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="29%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="32%" valign="top" height="36"> 
      <p>BIG_TICK_INTERVALX=2<br>
        TICK_INTERVALX=1<br>
        XAXIS_DATE_STEP=d<br>
        XAXIS_INITIAL_DATE=01-01-2001</p>
    </td>
    <td width="39%" valign="top" height="36"> 
      <p><font color="#3333FF">Ticks Interval<br>
        <br>
        Each unit of the scale will stand for a day.<br>
        Starting date is 01-01-2001</font> </p>
    </td>
    <td width="29%" valign="top" height="36"> 
      <div align="left"> 
        <p>chart.YAxis.bigTickInterval;<br>
          chart.YAxis.scaleTickInterval;<br>
          chart.YAxis.dateStep;<br>
          chart.YAxis.initialDate ;</p>
      </div>
    </td>
  </tr>
</table>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">will result in the following 
  secuence of ticks/labels</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">- big tick, label &quot;01-Jan-01&quot;<br>
  - small tick, no label<br>
  - big tick, label &quot;03-Jan-01&quot;<br>
  - small tick, no label<br>
  - big tick, label &quot;05-Jan-01&quot;<br>
  - ..... </font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">Example 1:</font></p>
<table width="100%" border="0" height="81">
  <tr> 
    <td width="41%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="37%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="22%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="41%" valign="top" height="36"> 
      <p>XAXIS_DATE_FORMAT=MMM <br>
        XAXIS_DATE_STEP=m <br>
        XAXIS_INITIAL_DATE=10-06-2002 </p>
    </td>
    <td width="37%" valign="top" height="36"> 
      <p><font color="#3333FF">Format of the date (only month name)<br>
        Every unit stands for 1 months<br>
        Starting date is 10-06-2002 </font></p>
    </td>
    <td width="22%" valign="top" height="36"> 
      <div align="left"> 
        <p>chart.YAxis.dateLabelFormat;<br>
          chart.YAxis.dateStep;<br>
          chart.YAxis.initialDate ; </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisdates.PNG" width="259" height="48"></font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">Example 2:</font></p>
<table width="100%" border="0" height="81">
  <tr> 
    <td width="41%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="37%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="22%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="41%" valign="top" height="36"> 
      <p>XAXIS_DATE_FORMAT=dd-MMM<br>
        XAXIS_DATE_STEP= d3 <br>
        XAXIS_INITIAL_DATE=10-10-2001 </p>
    </td>
    <td width="37%" valign="top" height="36"> 
      <p><font color="#3333FF">Format of the date<br>
        Every unit stands for 3 days<br>
        Starting date is 10-10-2001</font></p>
    </td>
    <td width="22%" valign="top" height="36"> 
      <div align="left"> 
        <p>chart.YAxis.dateLabelFormat;<br>
          chart.YAxis.dateStep;<br>
          chart.YAxis.initialDate ; </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisdates2.PNG" width="331" height="36"></font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">Example 3:</font></p>
<table width="100%" border="0" height="81">
  <tr> 
    <td width="41%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="37%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="22%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="41%" valign="top" height="36"> 
      <p>XAXIS_DATE_FORMAT=HH:mm<br>
        XAXIS_DATE_STEP=n30<br>
        XAXIS_INITIAL_DATE = &quot;10-10-2001 12:00:00 </p>
    </td>
    <td width="37%" valign="top" height="36"> 
      <p><font color="#3333FF">Format of the date<br>
        Every unit stands for 30 minutes<br>
        Starting date/time is</font></p>
    </td>
    <td width="22%" valign="top" height="36"> 
      <div align="left"> 
        <p>chart.YAxis.dateLabelFormat;<br>
          chart.YAxis.dateStep;<br>
          chart.YAxis.initialDate ; </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisdates3.PNG" width="351" height="47"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><b><a name="7"></a>Second 
  Y Axis</b></font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">In order to activate the 
  second Y axis you must use:</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">Y2AXIS =true</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">then you can define which 
  data serie will use the scale of the second axis (serie 2 is the blue line)</font></p>
<table width="100%" border="0" height="81">
  <tr> 
    <td width="41%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="26%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="33%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="41%" valign="top" height="36"> 
      <p>Y2AXIS =true<br>
        SERIE_SECONDYAXIS_2=TRUE </p>
    </td>
    <td width="26%" valign="top" height="36"> 
      <p><font color="#3333FF">Activate second/right Y axis<br>
        Serie 2( the blue line) will use the second Y scale</font></p>
    </td>
    <td width="33%" valign="top" height="36"> 
      <div align="left"> 
        <p>chart.setY2Scale(cY2Axis); <br>
          serie.secondYAxis=true; </p>
      </div>
    </td>
  </tr>
</table>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisY2.PNG" width="275" height="253"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><b><a name="8"></a>Look 
  of the axis</b></font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The following three parameters 
  define the color and style of the axis</font></p>
<table width="100%" border="0" height="81">
  <tr> 
    <td width="41%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="37%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="22%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="41%" valign="top" height="36"> 
      <p>YAXIS_STYLE=2|0xff|NORMAL <br>
        YAXIS_FONT=Serif|BOLD|10 <br>
        YAXIS_FONT_COLOR=0xcc3300 </p>
    </td>
    <td width="37%" valign="top" height="36"> 
      <p><font color="#3333FF">Style of the axis<br>
        Font of labels<br>
        Color of labels</font></p>
    </td>
    <td width="22%" valign="top" height="36"> 
      <div align="left"> 
        <p>chart.YAxis.style;<br>
          chart.YAxis.DescFont;<br>
          chart.YAxis.DescColor;</p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/axisFormat.PNG" width="46" height="201"></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">Axis can be painted as 
  a bar (see screenshot below) using the following parameters:</font></p>
<ul>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"> ?AXIS_BAR_STYLE: style 
    of the axis REGULAR or BAR</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"> ?AXIS_BAR_WIDTH: width 
    of the bar (the default is 12)</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1"> ?AXIS_FILLING: fill 
    style of the bar</font></li>
</ul>
<p><font face="Arial, Helvetica, sans-serif" size="-1">where ? is X, Y , Y2 , 
  X_1 ... and so on</font></p>
<table width="100%" border="0" height="81">
  <tr> 
    <td width="32%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="28%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="40%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="32%" valign="top" height="36"> 
      <p>XAXIS_BAR_STYLE=BAR<br>
        XAXIS_BAR_WIDTH=12 (default)<br>
        XAXIS_FILLING=0x33cccc <br>
      </p>
      </td>
    <td width="28%" valign="top" height="36"> 
      <p><font color="#3333FF">Style of the axis<br>
        Font of labels<br>
        Color of labels</font></p>
    </td>
    <td width="40%" valign="top" height="36"> 
      <div align="left"> 
        <p>axis.barStyle=Axis.BAR_STYLE_BAR;<br>
          axis.barWidth=12;<br>
          axis.barFilling= new FillStyle GraphicsProvider.getColor( &quot;0x33cccc&quot;) 
          );</p>
      </div>
    </td>
  </tr>
</table>
<p>&nbsp;</p>
<p><img src="images/axisbar.PNG" width="297" height="24"></p>
<p>&nbsp;</p>
<p></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><b><a name="9"></a>X Axis 
  on top</b></font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">If you want to place the 
  x scale on the top of the chart, instead of on the bottom you can use the following 
  parameters:</font></p>
<table width="100%" border="0" height="81">
  <tr> 
    <td width="41%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="37%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="22%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="41%" valign="top" height="36"> 
      <p>XAXIS_ON_TOP=TRUE<br>
      </p>
    </td>
    <td width="37%" valign="top" height="36"> 
      <p><font color="#3333FF">Place it on top</font></p>
    </td>
    <td width="22%" valign="top" height="36"> 
      <div align="left"> 
        <p>chart.XAxis.scaleOnTop;<br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p><font face="Arial, Helvetica, sans-serif" size="-1">Note that this is not supported 
  for 3D charts.</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><img src="images/xaxistop.png" width="388" height="108"></font></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><b><a name="10"></a>Additional 
  (secondary) axis</b></font></p>
<p>&nbsp;</p>
<p>In addition to the main axis (Y , X and Y2 axis) you can define additional 
  (or secondary) axis which are displayed parallel to the main axis. There is 
  no limit in the number of axis you define other than the space available in 
  your chart. If you create secondary axis you will normally also need to increase 
  the margin reserved for the axis (left , bottom or right margin).</p>
<p>Secondary axis can be enabled with the ?_AXIS parameter where ? can be X_1, 
  X_2 ... for the X axis, Y1_, Y_2 ... for the Y axis and Y2_1, Y2_2 ... for the 
  Y2 axis ( right hand side Y axis).</p>
<p>The following screenshot displays a chart with a secondary Y axis (the blue 
  one):</p>
<p>&nbsp;</p>
<table width="100%" border="0" height="81">
  <tr> 
    <td width="28%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="30%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="42%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="28%" valign="top" height="36"> 
      <p>Y_1AXIS=TRUE<br>
        Y_1SCALE_MIN=0<br>
        Y_1SCALE_MAX=20<br>
        Y_1AXIS_BAR_STYLE=BAR<br>
        Y_1AXIS_FILLING=LIGHTBLUE<br>
        Y_1AXIS_LABEL=Survey 1<br>
        <br>
        <br>
        SERIE_SECONDARY_YAXIS_1=1 <br>
      </p>
    </td>
    <td width="30%" valign="top" height="36"> 
      <p><font color="#3333FF">Enable secondary axis (blue)<br>
        define scale<br>
        <br>
        <br>
        <br>
        Define label for the axis</font></p>
      <p><font color="#3333FF"> <br>
        Data series 1 must be plotted using Y_1 axis.</font></p>
    </td>
    <td width="42%" valign="top" height="36"> 
      <div align="left"> 
        <p>y_1axis=new Axis(Axis.VERTICAL,new Scale());<br>
          y_1axis.scale.min=0;<br>
          y_1axis.scale.max=20; <br>
          y_1axis.barStyle=Axis.BAR_STYLE_BAR;<br>
          y_1axis.barFilling= new FillStyle(GraphicsProvider.getColor( ChartColor.LIGHTBLUE) 
          );<br>
          y_1axis.label=&quot;Survey 1&quot;; <br>
          yaxis.addAdditionalAxis( y_1axis); // add seconday axis<br>
          <br>
          dataSerie.secondaryYAxis=y_1axis;</p>
      </div>
    </td>
  </tr>
</table>
<p>&nbsp;</p>
<p><img src="images/additionalAxis.PNG" width="300" height="298"></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The parameters SERIE_SECONDARY_XAXIS_* 
  and SERIE_SECONDARY_YAXIS_* are used to specify that a given data serie must 
  be plotted using a secondary axis.</font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The axis can also be stacked 
  as in the screenshot below using the parameter ?AXIS_STACK_ADDITIONAL=TRUE. 
  As a result the chart gets splitted in 2 areas which can be used to plot 2 charts 
  one on the top of the other:</font></p>
<p><img src="images/stackedaxis.PNG" width="198" height="298"></p>
<table width="100%" border="0" height="65">
  <tr> 
    <td width="28%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="30%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Description</i></b></font></div>
    </td>
    <td width="42%" valign="top" bgcolor="#CCCCCC"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="28%" valign="top" height="34"> 
      <p>Y<font face="Arial, Helvetica, sans-serif" size="-1">AXIS_STACK_ADDITIONAL=TRUE</font><br>
      </p>
    </td>
    <td width="30%" valign="top" height="34"> 
      <p><font color="#3333FF">Stack axis</font><font color="#3333FF"></font></p>
    </td>
    <td width="42%" valign="top" height="34"> 
      <div align="left"> 
        <p> yaxis.stackAdditionalAxis=true;<br>
        </p>
      </div>
    </td>
  </tr>
</table>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">If you also create a secondary 
  axis for the X axis and stack them, you will get 4 subcharts as in the screenshot:</font></p>
<p>&nbsp;</p>
<p><img src="images/multiaxis.PNG" width="416" height="389"></p>
<p>&nbsp;</p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1"><b><a name="11"></a>Axis 
  Target zones</b></font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">Axis Target zones are used 
  to remark a range of values in the axis. The following screenshot shows an axis 
  with 2 target areas:</font></p>
<p><img src="images/axisZones.PNG" width="41" height="257"></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">As you can see target zones 
  can be lines or areas (with start and end positions). The ?AXIS_TARGET_ZONE_* 
  parameters are used to add target zones to the charts. The syntax of the parameter 
  is:</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">?AXIS_TARGET_ZONE_*=&lt;start 
  value&gt;;&lt;end value&gt;;&lt;line style&gt;;&lt;fill style&gt;;&lt;label&gt;</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">where:</font></p>
<ul>
  <li>? can be X , Y , Y2 , X_1 , X_2 , Y_1, Y_2 and so on.</li>
  <li>* is a counter 1,2,3,4 and so on.</li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">&lt;start value&gt;: 
    position of the target zone.</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">&lt;end value&gt;: (optional) 
    end position of the zone</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">&lt;line style&gt;: 
    style of the line for the borders of the zone</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">&lt;fill style&gt;: 
    (optional) style for filling the zone</font></li>
  <li><font face="Arial, Helvetica, sans-serif" size="-1">&lt;label&gt;: (optional) 
    text to be displayed as label</font></li>
</ul>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The 2 zones in the example 
  above are defined as:</font></p>
<table width="100%" border="0" height="71">
  <tr> 
    <td width="30%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="44%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="30%" valign="top" height="248"> 
      <p>Y_AXIS_TARGET_ZONE_1=0%;30%;;RED;@rotation value='90'@@color value='RED'@Dissatisfied</p>
      <p>Y_AXIS_TARGET_ZONE_2=70%;100%;;GREEN;@rotation value='90'@@color value='GREEN'@Satisfied</p>
      </td>
    <td width="44%" valign="top" height="248"> 
      <div align="left"> 
        <p>String value=&quot;0%;30%;;RED;@rotation valu........&quot;;<br>
          axis.addTargetZone( AxisTargetZone.createFromString(value));</p>
        <p>OR</p>
        <p>AxisTargetZone zone=new AxisTargetZone(0,30, IConstants.UNIT_PERCENTAGE, 
          IConstants.UNIT_PERCENTAGE);<br>
          zone.fillStyle=new FillStyle(GraphicsProvider.getColor(ChartColor.RED));<br>
          zone.label=&quot;@rotation value='90'@@color value='RED'@Dissatisfied&quot;; 
          <br>
        </p>
        </div>
    </td>
  </tr>
</table>
<p>&nbsp;</p><p><font face="Arial, Helvetica, sans-serif" size="-1"><b><a name="12"></a>Axis 
  label templates</b></font></p>
<p>&nbsp;</p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The ?AXIS_TEMPLATE parameter 
  allows you to define a template which will be applied to the labels which must 
  be painted next to the axis ticks. The template must contain the string<i> #value# 
  </i>which will be replaced by the actual value of the tick to be painted.</font></p>
<p><font face="Arial, Helvetica, sans-serif" size="-1">The following screenshot 
  and table shows an example of use of this parameter:</font></p>
<p>&nbsp;</p>
<p><img src="images/axisTemplate.PNG" width="317" height="60"></p>
<p>&nbsp;</p>
<table width="100%" border="0" height="71">
  <tr> 
    <td width="47%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Parameters</i></b></font></div>
    </td>
    <td width="53%" valign="top" bgcolor="#CCCCCC" height="27"> 
      <div align="center"><font color="#000000"><b><i>Equivalent java class/property</i></b></font></div>
    </td>
  </tr>
  <tr> 
    <td width="47%" valign="top" height="70"> 
      <p>XAXIS_TEMPLATE=@background value='LIGHTYELLOW'@@position value='+0px,+5px'@@border 
        value='1|BLACK|NORMAL'@ #value#</p>
      </td>
    <td width="53%" valign="top" height="70"> 
      <div align="left"> 
        <p>axis.labelTemplate=&quot;@background value='LIGHTYELLOW'@@position 
          value='+0px,+5px'@@border value='1|BLACK|NORMAL'@ #value#&quot;;<br>
        </p>
        </div>
    </td>
  </tr>
</table>
<p>&nbsp;</p>
<hr>
<p>&nbsp; </p>
</body>
</html>
